
<template>
  <div class="companyPIndex">
    <userHeader />
    <div class="breadClum">
      <span>
          <router-link :to="{path:'/pageIndex'}"> <a class="bread1">当前位置：首页  >  </a></router-link>
         <router-link :to="{path:'/query'}">  <a class="bread2">综合查询  ></a></router-link>
         <a class="bread2">流程评价工作进度查询</a>
      </span>
    </div>
    <div class="companyListIndex">
      <div class="container">
        <ul>
          <li>
            <span class="text">评价流程总数:</span>
            <span class="nums">{{basicData.total_process || 0}}</span>
          </li>
          <li>
            <span class="text">按期完成评价流程:</span>
            <span class="green nums">{{basicData.ontime_process|| 0}}</span>
          </li>
          <li>
            <span class="text">超期完成评价流程:</span>
            <span class="yellow nums">{{basicData.overdue_process|| 0}}</span>
          </li>
          <li>
            <span class="text">未完成测试评价流程:</span>
            <span class="dangerRed nums">{{basicData.unfinished_process|| 0}}</span>
          </li>
          <li>
            <span class="text">完成测试评价流程比率:</span>
            <span class="nums">{{basicData.process_rate|| 0}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="navList">
      <!--评价企业-->
      <el-dropdown trigger="click"
                   style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;"
                   @command="handleCommentCompany">
          <span class="el-dropdown-link">
            {{commentCompany}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px;height: 300px;overflow-y: scroll">
          <el-dropdown-item v-for="item in companyList" :command="item" :key="item.company_id">{{item.company_name}}</el-dropdown-item>
          <el-dropdown-item v-if="companyList.length==0">暂无数据</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!--评价期间-->
      <el-dropdown trigger="click"
                   style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;"
                   @command="setEvaluationPeriod">
          <span class="el-dropdown-link">
            {{evaluationPeriodSelect}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px;height: 300px;overflow-y: scroll">
          <el-dropdown-item v-for="item in evaluationPeriodList" :command="item"
                            :key="item.evaluation_period">{{item.evaluation_period}}
          </el-dropdown-item>
          <el-dropdown-item v-if="evaluationPeriodList.length==0">暂无数据</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>


      <!--评价类型-->
      <el-dropdown trigger="click"
                   style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;"
                   @command="handleCommentType">
          <span class="el-dropdown-link">
            {{commentType}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px;height: 300px;overflow-y: scroll">
          <el-dropdown-item v-for="item in commentTypeList" :command="item" :key="item.evaplan_type_id">{{item.evaplan_type_name}}</el-dropdown-item>
          <el-dropdown-item command="none" v-if="commentTypeList.length==0">暂无数据</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!--&lt;!&ndash;评价流程&ndash;&gt;-->
      <!--<el-dropdown trigger="click"-->
                   <!--style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;width: 80px;text-align: center;"-->
                   <!--@command="handleProgressType">-->
          <!--<span class="el-dropdown-link">-->
            <!--{{progressType}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
          <!--</span>-->
        <!--<el-dropdown-menu slot="dropdown" style="padding: 0 20px;">-->
          <!--<el-dropdown-item :command="0">年度评价</el-dropdown-item>-->
          <!--<el-dropdown-item :command="1">hello</el-dropdown-item>-->
          <!--<el-dropdown-item :command="2">测试中</el-dropdown-item>-->
        <!--</el-dropdown-menu>-->
      <!--</el-dropdown>-->

      <el-button @click="downLoadFile" :loading="downloadLoading" class="download-file" style="" type="primary" icon="el-icon-download" size="mini"></el-button>
      <div style="float: right;padding: 0;">
        <el-date-picker
          v-model="period"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </div>
    </div>
    <el-table
      :data="commentTableData.list"
      stripe
      v-loading="loading"
      show-summary
      :summary-method="getTotal">
      <el-table-column
        prop="process_num"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="process_name"
        label="评价流程"
        width="200">
      </el-table-column>
      <el-table-column
        prop="progress"
        label="评价测试环节及进度">
        <el-table-column
          prop="design_evaluation"
          label="设计评价">
        </el-table-column>
        <el-table-column
          prop="execute_evaluation"
          label="执行评价">
        </el-table-column>
        <el-table-column
          prop="defects_identified"
          label="缺陷认定">
        </el-table-column>
        <el-table-column
          prop="task_allocation"
          label="整改任务分配">
        </el-table-column>
        <el-table-column
          prop="compile_rectificationplan"
          label="编织整改计划">
        </el-table-column>
        <el-table-column
          prop="affirm_rectificationplan"
          label="整改计划确认">
        </el-table-column>
        <el-table-column
          prop="implement_rectificationresult"
          label="落实整改结果">
        </el-table-column>
        <el-table-column
          prop="evaluation_report"
          label="评价报告">
        </el-table-column>
        <el-table-column
          prop="evaluation_finishtime"
          width="160"
          label="测试工作截止日">
        </el-table-column>
        <el-table-column
          width="120"
          prop="work_schedule"
          label="工作进度">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.work_schedule"  :color="colors[scope.row.finish_state]"></el-progress>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="progress"
        label="评价点测试完成情况">
        <el-table-column
          prop="total_evaluationpoints"
          label="评价点总数">
        </el-table-column>
        <el-table-column
          prop="ontime_evaluationpoints"
          label="按期完成评价点">
        </el-table-column>
        <el-table-column
          prop="overdue_evaluationpoints"
          label="超期完成评价点">
        </el-table-column>
        <el-table-column
          prop="unfinished_evaluationpoints"
          label="未完成评价点">
        </el-table-column>
        <el-table-column
          prop="evaluationpoint_schedule"
          label="评价点测试完成率">
        </el-table-column>
        <el-table-column
          label="有无缺陷"
          prop="has_defect">
        </el-table-column>

      </el-table-column>
    </el-table>

    <!--分页器-->
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="limit"
        background
        layout="prev, pager, next, jumper"
        :page-count="pages">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import userHeader from '@/components/header.vue';
  import {mapState} from 'vuex';
  export default({
    computed:{
      ...mapState({
        height:state=>sessionStorage.getItem('height')||state.app.height,
      }),
    },
    data(){
      return {
        limit: 10,
        page: 1,
        pages: 1,
        basicData:{},//头部的基本数据
        commentCompany: "评价企业",
        companyList: [],//评价企业列表
        company_id: '',//评价企业id
        evaluationPeriodSelect: '评价期间',
        evaluationPeriodList: [],//评价期间列表
        evaluation_period: '', //评价期间 id
        evaplan_type_id: '', //评价类型id
        process_id: '',//评价流程id
        commentPeriod: '',//评价期间的时间段
        period: '',
        commentType: "评价类型",
        commentTypeList:[],
        downloadLoading: false,
        loading:true,
        commentTableData: {
          list:[]
        },
        colors: ['#f66c6c', '#8cc34b', '#f0b914'] //为完成  完成  超期完成
      }
    },
    components:{
      userHeader,
    },
    created(){
      this.getCompanyList();
      //评价流程基本数据
      this.getBasic(this.company_id,this.evaluation_period,this.evaplan_type_id,this.process_id);
      this.getEvaluationPointProgress(this.company_id, this.evaluation_period, this.evaplan_type_id,this.limit, this.page)
    },
    methods:{
      //评价企业
      handleCommentCompany(command) {
        console.log(command)
        //当在选择公司 查看了数据之后  切换公司时  需将上一次 的 各个数据还原
        this.evaluation_period='';
        this.evaplan_type_id='';
        this.process_id ='';
        this.evaluationPeriodSelect ='评价期间';
        this.commentType = "评价类型";
        this.progressType='评价流程';
        this.loading =true;
        if(command=='none'||command.company_id== this.company_id){
          return false
        }
        this.company_id = command.company_id == "all" ? '':command.company_id;
        this.commentCompany = command.company_name;

        this.getBasic(this.company_id,this.evaluation_period,this.evaplan_type_id);

        this.getCommentTypeList(this.company_id,this.evaluation_period).then(res=>{
          console.log(res)
          if(res.data.code == 0){
            this.commentTypeList = [...res.data.data,{
              "evaplan_type_id": "all",
              "evaplan_type_name": "所有",
              "start_time": "",
              "end_time": "",
              "company_id": "",
              "bl_year_evaluate": "",
              "current_time": "",
              "evaluation_period": "",
              "numrow": ""
            }]
          }

        })

        this.getCompanyEvaluationPeriod(command.company_id).then(res => {
          console.log(res.data.data)
          if (res.data.code == 0) {
            this.evaluationPeriodList = [...res.data.data,{evaluation_period: "所有"}]
          }
        }).then(()=>{
          this.getEvaluationPointProgress(this.company_id, this.evaluation_period, this.evaplan_type_id, this.limit, this.page)
        })
      },
      setEvaluationPeriod(command){
        if(command == 'none' ||command.evaluation_period==this.evaluation_period){
          return false
        }
        this.evaluation_period = command.evaluation_period =='所有' ? '':command.evaluation_period;
        this.evaluationPeriodSelect = command.evaluation_period;
        this.commentType='评价类型';
        this.evaplan_type_id='';
        this.loading =true;
        this.getBasic(this.company_id,this.evaluation_period,this.evaplan_type_id);
        this.getCommentTypeList(this.company_id,this.evaluation_period).then(res=>{
          console.log(res)
          if(res.data.code == 0){
            this.commentTypeList = [...res.data.data,{
              "evaplan_type_id": "all",
              "evaplan_type_name": "所有",
              "start_time": "",
              "end_time": "",
              "company_id": "",
              "bl_year_evaluate": "",
              "current_time": "",
              "evaluation_period": "",
              "numrow": ""
            }]
          }

        }).then(()=>{
          this.getEvaluationPointProgress(this.company_id, this.evaluation_period, this.evaplan_type_id, this.limit, this.page)
        })
      },
      //评价类型选择
      handleCommentType(command) {
        console.log(command)
        if(command == 'none'||command.evaplan_type_id==this.evaplan_type_id){
          return false
        }
        this.evaplan_type_id =  command.evaplan_type_id =='all' ? '':command.evaplan_type_id;
        this.commentType = command.evaplan_type_name;
        this.loading =true;
        this.getBasic(this.company_id,this.evaluation_period,this.evaplan_type_id);
        this.getEvaluationPointProgress(this.company_id, this.evaluation_period, this.evaplan_type_id,this.limit, this.page)
      },
      handleCurrentChange(val){
        this.page = val;
        this.getEvaluationPointProgress(this.company_id, this.evaluation_period, this.evaplan_type_id,this.limit, this.page)
      },
      //表格的合计 行 合计的方法
      getTotal(param) {
        console.log(param)
        const {
          columns,
          data
        } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '评价测试综合进度';
            return;
          }
          switch (column.property) {
            // case "process_name":
            //   sums[index] = this.commentTableData.process_total;
            //   break;
            case "design_evaluation":
              sums[index] = this.commentTableData.design_evaluation_total;
              break;
            case "execute_evaluation":
              sums[index] = this.commentTableData.execute_evaluation_total;
              break;
            case "defects_identified":
              sums[index] = this.commentTableData.defects_identified_total;
              break;
            case "task_allocation":
              sums[index] = this.commentTableData.task_allocation_toral;
              break;
            case "compile_rectificationplan":
              sums[index] = this.commentTableData.compile_rectificationplan_total;
              break;
            case "affirm_rectificationplan":
              sums[index] = this.commentTableData.affirm_rectificationplan_total;
              break;
            case "implement_rectificationresult":
              sums[index] = this.commentTableData.implement_rectificationresult_total;
              break;
            case "evaluation_report":
              sums[index] = this.commentTableData.evaluation_report_total;
              break;
            case "work_schedule":
              sums[index] = this.commentTableData.work_schedule_total;
              break;
            default:
              sums[index] = "--";
              break;
          }
        });
        return sums;
      },
      downLoadFile(){
        if(this.commentTableData.defect_list.length>0){
          this.downloadLoading = true
          import('../utils/export2Excel').then(excel => {
            console.log(1111)
            const filterVal = ['process_num', 'process_name', 'controlpoint_num', 'defects_num', 'design_defect_num','execute_defect_num','design_execute_num','general_defect_num','crucial_defect_num','fatal_defect_num','total_standard_score','total_evaluation_score','defects_rate']
            // const filterVal = ['编号', '评价流程', '控制点', '控制数量', '设计缺陷','执行缺陷','设计和执行缺陷','一般缺陷','重要缺陷','重大缺陷','标准分值','设计分值','比率(%)']
            const tHeader = ['编号', '评价流程', '控制点', '控制数量', '设计缺陷','执行缺陷','设计和执行缺陷','一般缺陷','重要缺陷','重大缺陷','标准分值','设计分值','比率(%)']


            //此处为 合计的数据
            const lastColumn = {
              process_num: "合计",
              process_name: this.commentTableData.process_total,
              controlpoint_num: this.commentTableData.controlpoint_total,
              crucial_defect_num: this.commentTableData.crucial_defect_total,
              current_time: parseInt(new Date())/1000,
              defects_num: this.commentTableData.defects_total,
              defects_rate: this.commentTableData.defects_rate_total,
              design_defect_num: this.commentTableData.execute_defect_total,
              design_execute_num: this.commentTableData.design_execute_total,
              element_id: "",
              execute_defect_num: this.commentTableData.execute_defect_total,
              fatal_defect_num: this.commentTableData.fatal_defect_total,
              general_defect_num: this.commentTableData.general_defect_total,
              is_hascontrolpoint: "",
              process_id: "",
              process_pid: "0",
              total_evaluation_score: this.commentTableData.evaluation_score_total,
              total_standard_score: this.commentTableData.standard_score_total,
              user_id: "",
            }

            const list = [...this.commentTableData.defect_list,lastColumn]
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data:data,
              filename:"缺陷统计表（第"+this.page+"页）",
              autoWidth: true,
              bookType: "xlsx"
            })
            this.downloadLoading = false

          })
        }else {
          this.$alert("表格无数据，无法下载","提示")
        }

      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      getEvaluationPointProgress(company_id, evaluation_period, evaplan_type_id, limit, page) {
        this.axios.get('/api/v1/enquiry/evaluationprocesstempo?company_id=' + company_id + '&evaluation_period=' + evaluation_period + '&evaplan_type_id=' + evaplan_type_id + '&limit=' + limit + '&page=' + page).then(res => {
          if (res.data.code == 0) {
            this.commentTableData = res.data.data;
            this.page = res.data.pagination.page;
            this.limit = res.data.pagination.limit;
            this.pages = res.data.pagination.pages;
            this.loading=false;
          } else {
            this.$alert(res.data.message, "提示")
          }
        })
      },
      //评价流程基本数据
      getBasic(company_id,evaluation_period,evaplan_type_id){
        this.axios.get('/api/v1/enquiry/evaluationprocessbasic?company_id='+company_id+'&evaluation_period='+evaluation_period+'&evaplan_type_id='+evaplan_type_id).then(res=>{
          console.log(res)
          if(res.data.code==0){
            this.basicData = res.data.data
          }else{
            this.basicData = {
              ontime_process: 0,
              overdue_process: 0,
              process_rate: "0",
              total_process: 0,
              unfinished_process: 0,
            }
          }
        })
      },
      //获取公司列表
      getCompanyList() {
        this.axios.get('/api/v1/enquiry/companyflat')
          .then((res) => {
            var companyList = [];
            if (res.data.code == 0) {
              console.log((res.data.data))
              companyList = this.formatSonCompany(res.data.data);
              this.companyList = [...companyList, {
                company_id: "all",
                company_level: "1",
                company_name: "所有",
                company_num: "",
                company_pid: "",
                company_state: "",
                current_time: "",
                evaluate_section: "",
                numrow: "",
                son_company: [],
              }]
              console.log(this.companyList)
            }
          })
      },
      //将公司列表树状结构转化为数组
      formatSonCompany(data) {
        var temp = [], list = [];

        function copySonCompany(obj) {
          temp = [...temp, obj]
          if (obj.son_company.length > 0) {
            obj.son_company.forEach(element => {
              copySonCompany(element)
            })
          }
          return temp
        }

        data.forEach(el => {
          list = [...list, ...copySonCompany(el)]
        })
        return list
      },
      //获取公司的评价期间列表
      getCompanyEvaluationPeriod(company_id) {
        return this.axios.get('/api/v1/flow/controlindicators?company_id=' + company_id)
      },
      //评价类型列表
      getCommentTypeList(company_id,evaluation_period){
        // /api/v1/enquiry/evaplantypequery?company_id=5&evaluation_period=2019
        return this.axios.get('/api/v1/enquiry/evaplantypequery?company_id='+company_id+'&evaluation_period='+evaluation_period)
      }
    }
  })
</script>
<style scoped="">
  .companyPIndex{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
  .companyPIndex .companyListIndex .container{
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .companyPIndex .companyListIndex ul{
    float: right;
    overflow: hidden;
  }
  .companyPIndex .companyListIndex ul li{
    float: left;
    margin-right: 20px;
  }
  .companyPIndex .companyListIndex ul li  span.nums{
    color: #333;
    display: inline-block;
    padding: 4px 0px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    width: 50px;
    text-align: center;


  }
  .companyPIndex .companyListIndex ul li  span.green{
    background: #8cc34b;
    color: white;
  }
  .companyPIndex  .companyListIndex ul li  span.yellow{
    background: #f0b914;
    color: white;
  }
  .companyPIndex .companyListIndex ul li  span.dangerRed{
    background: #f66c6c;
    color: white;
  }


  .companyPIndex .navList {
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .companyPIndex .navList > div {
    background: none;
  }
  .companyPIndex .download-file {
    margin-right: 36px;
    margin-top: 11px;
    float: right;
    padding: 7px 8px;
    background: #769dd6;
    border: none;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
  }
  .companyPIndex >>>  .el-table thead th{
    background: #d3e9bb;
  }
  .companyPIndex >>> .el-table thead {
    color: #5d9120;
    text-align: center;
  }
  .companyPIndex >>> .el-table  .cell{
    text-align: center;
  }
  .companyPIndex >>>  .el-table td, .el-table th.is-leaf{
    border-bottom: 1px solid #aac983;
  }
  .companyPIndex >>>  .el-table .el-table--border, .el-table--group{
    border: 1px solid #aac983;
  }
  .companyPIndex >>> .el-table td, .companyPIndex >>> .el-table th.is-leaf{
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }
  .companyPIndex >>> .el-table--border th,  .companyPIndex .el-table__fixed-right-patch{
    border-bottom:1px solid #aac983;
  }
  .companyPIndex >>> .el-table--border td, .companyPIndex >>> .el-table--border th, .companyPIndex >>> .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
    border-right: 1px solid #aac983;
  }

  .companyPIndex >>> .el-table__body  .el-table__row td .cell .s1 .el-checkbox__inner,
  .companyPIndex >>> .el-table__body  .el-table__row td .cell .s2 .el-checkbox__inner{
    width: 14px;
    height: 14px;
  }
  .companyPIndex >>> .el-table__body  .el-table__row td .cell .s2{
    margin-left: 0 !important;
  }
  .companyPIndex >>> .el-table__body .el-checkbox__inner::after{
    left: 3px;
    width: 4px;
    height: 6px;
    -webkit-transform: rotate(45deg) scaleY(1);
    transform: rotate(45deg) scaleY(1);
  }
  .companyPIndex >>> .el-table__body  .el-checkbox__input .el-checkbox__inner{
    background: #d5d5d5;
    border-color: #d5d5d5;
  }
  .companyPIndex >>> .el-table__body  .el-checkbox__input.is-checked .el-checkbox__inner,
  .companyPIndex >>> .el-table__body  .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: #8bc34a;
    border-color: #8bc34a;
  }
  .companyPIndex >>> .el-table__body   .el-checkbox__inner:hover{
    border-color: #d5d5d5;
  }
  .companyPIndex >>> .el-progress-bar__inner{
    text-align: center;
  }
  .companyPIndex>>> .el-table__header-wrapper tbody td, .companyPIndex>>>  .el-table__footer-wrapper tbody td{
    background: #d3e9bb;
  }
  @media screen and (max-width: 1400px) {
    .companyPIndex{
      padding: 6px;
    }
  }
</style>
